<template>
  <div class="box">
    <Headbar class="headbar"></Headbar>
    <img class="img" src="../assets/awQpWR.jpg" alt="" />
    <vuedraggable><Calculator v-if="isShowCalculator" class="calculator"></Calculator>
    </vuedraggable>

    <toobar @openCalculator="parentEvent" class="toolbar"> </toobar>
  </div>
</template>

<script>
import vuedraggable from "vuedraggable";
import Toobar from "./toobar.vue";
import Headbar from "./headbar.vue";
import Calculator from "./sorft/calculator.vue";
export default {
  data() {
    return {
      isShowCalculator: false,
    };
  },
 
  components: {
    Toobar,
    Headbar,
    Calculator,
    vuedraggable,
  },
  methods: {
    parentEvent(data) {
      this.isShowCalculator = data;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.box {
  width: 100%;
  height: 100%;
}
.headbar {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0px;
  left: 50%;
  width: 100%;
  height: 4%;
  background-color: #b1beb5;
  transform: translate(-50%, 0%);
  z-index: 10;
}
.toolbar {
  position: fixed;
  bottom: 0px;
  left: 50%;
  width: 100%;
  height: 8%;
  background-color: rgba(0, 0, 0, 0.2);
  transform: translate(-50%, 0%);
  overflow: hidden;
  /* border: 1px solid rgba(255, 255, 255, 0.432); */
}
.toolbar::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 99.5%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  -webkit-filter: blur(2px);
  filter: blur(2px);
  background: rgba(255, 255, 255, 0.5);
}
.img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* cursor: pointer; */
  user-select: none;
  /* cursor: not-allowed */
  pointer-events:none
}
.calculator {
  position: absolute;
  top: 10%;
  left: 50%;
  margin-left: -105px;
}
.drdc-enter-to,
.drdc-leave-to {
  transition: opacity 3s;
  /* animation: mymove 1s 1s linear; */
}
@keyframes mymove {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
</style>
